
<div class="row">
<fieldset  class="member span10">
			<legend >Member</legend>			
			<g:if test="${members }">
			<g:each in="${members}" var="team_member">
				<g:set var="member" value="${team_member.member}" />
				<div class="member-profile" class="span3" >
					<g:if test="${team_member?.isAccepted}">
						<div class="member-avatar" data-id="${member.id}">
							<div class="darken">
								<g:if test="${member?.avatar}">
									<img src="${request.contextPath}/avatarImages/${fieldValue(bean: member, field: "avatar")}">
								</g:if>
								<g:else>
									<img src="${request.contextPath}/avatarImages/user.png">
								</g:else>
							</div>
						</div>
						<div class="member-info">
							<p class="member-name">
								<g:fieldValue bean="${member}" field="firstName" /> <g:fieldValue bean="${member}" field="lastName" />
							</p>
							<p><g:select name="position" class="${team_member.member.id}" value="${team_member.position}" from="${com.ant.myagile.EnumPosition.values()}" keys="${com.ant.myagile.EnumPosition.values()}" valueMessagePrefix="enum.value"/></p>
							<p><i class="aicon-male"></i>${member.gender}</p>
							<p><span class="aicon-email"></span><g:fieldValue bean="${member}" field="username" /></p>
							<p><i class="aicon-skype"></i><g:fieldValue bean="${member}" field="skype" /></p>
							<p><i class="aicon-mobile"></i><g:fieldValue bean="${member}" field="mobile" /></p>
							<p><i class="aicon-company"></i><g:fieldValue bean="${member}" field="company" /></p>
						</div>
					</g:if>
					<g:else>
						<div class="member-avatar" data-id="${member.id}">
							<div class="darken">
									<img width="214px" height="214px"
										src="${request.contextPath}/avatarImages/user.png">
							</div>
						</div>
						<div class="member-info">
							<p class="member-name">Waiting for accept</p>
							<p><i class="aicon-email"></i><g:fieldValue bean="${member}" field="username" /></p>
						</div>
					</g:else>					
				</div>
			</g:each>
			</g:if>
			<g:else>No member</g:else>
			
		</fieldset>
</div>
		
<script type="text/javascript">
		$(document).ready(function(){
			$("#checkAll").click(function(){
				if($("#checkAll").is(':checked')){
					$('.classCheckbox').prop("checked", true);
				}
				else { 
					$('.classCheckbox').prop("checked", false);
				}
			});
			$("#checkAll1").click(function(){
				if($("#checkAll1").is(':checked')){
					$('.classCheckbox').prop("checked", true);
				}
				else { 
					$('.classCheckbox').prop("checked", false);
				}
			});
			
		})
		jQuery(document).ready(function($){
			<%-- Create Team	--%>
			$('a[id="cr-team"]').on("click", function(){
				
				$("input[id='checkAll1']").attr("checked",false);
				$("input[name='myCheckbox']").attr("checked",false);
				$.ajax({
					url: '${g.createLink(controller: 'team', action: 'addTeam')}',					
					dataType: 'json',
					data: {},
					success: function(data){
						}
					});
				$('#create_modal').modal("show");
				});			
			<%-- End Create Team--%>
			<%-- Update Team	--%>
			temp="";
			$('a[id^="ud-team-"]').on("click", function(){
				teamId = $(this).attr("id").split("-")[2];			
				
				$.ajax({
					url: '${g.createLink(controller: 'team', action: 'getTeamInfo')}',
					dataType: 'json',
					data: {
						teamId: teamId
					},
					success: function(data){
						temp=data.assignedProjList;
						for(var i = 0; i < data.assignedProjList.length; i++){
							$("input[name='myCheckbox'][value='"+data.assignedProjList[i].id+"']").attr("checked",true);
						}
						$("#teamId2").val(data.team.id);	
						$("#teamName").val(data.team.teamName);
						$("#mailGroup").val(data.team.mailGroup);
						$("#description").val(data.team.description);
						$("#establishedDate1").val(data.establishedDate);
						
						var url="images/teamLogo/"+data.team.logo;
						
						
						$("#dimage").attr("src",${createLink(uri: '/')}+"images/teamLogo/"+data.team.logo);
						}
					});				
				$('#update_modal').modal("show");
				});			
			});
		<%--End update team --%
			<%--Delete Team --%>

			var teamId = null;
			
			$("a[id^='dl-team-']").on("click", function() {
				$("#delete-modal").modal('show');		
				teamId = $(this).attr("id").split("-")[2]; // Get team ID
			
			});
			
			$("#delete-modal").find("#btnDeleteTeam").on("click", function() {

				var okButton = $(this);
				okButton.button('hide');

				var removeURL = "${createLink(controller : 'team', action : 'deleteTeamById', absolute : 'true')}"		
												$.post(	removeURL,
																{
																	'teamId' : teamId
																})
														.done(
																function(data) {
																	
																	okButton.button('reset');
																	$("#delete-modal").modal('hide');
																//	$("#team-"+teamId).fadeOut();
																	
																});
											});
			<%--End delete Team --%>
		<%--Cancel Button --%>
		$("#cancel").click(function(){	
			document.getElementById('description1').value ='';
			document.getElementById('mailGroup1').value ='';
			document.getElementById('image1').value ='';
			document.getElementById('teamName1').value ='';
			document.getElementById('establishedDate').value ='';				
			$("input[id='checkAll']").attr("checked",false);
			$("input[name='myCheckbox']").attr("checked",false);
			for(var i = 0; i < temp.length; i++){
				$("input[name='myCheckbox'][value='"+temp[i].id+"']").attr("checked",true);
			}
		});
		<%-- End cancel --%>
		<%--Cancel1 Button --%>
		$("#cancel1").click(function(){					
			teamId = $("#teamId2").val();			
			document.getElementById('image').value ='';
			$.ajax({
				url: '${g.createLink(controller: 'team', action: 'getTeamInfo')}',
				dataType: 'json',
				data: {
					teamId: teamId
				},
				success: function(data){
					temp=data.assignedProjList;
					$("input[id='checkAll']").attr("checked",false);
					$("input[name='myCheckbox']").attr("checked",false);
					for(var i = 0; i < data.assignedProjList.length; i++){
						$("input[name='myCheckbox'][value='"+data.assignedProjList[i].id+"']").attr("checked",true);
					}
					$("#teamId2").val(data.team.id);	
					$("#teamName").val(data.team.teamName);
					$("#mailGroup").val(data.team.mailGroup);
					$("#description").val(data.team.description);
					$("#establishedDate1").val(data.establishedDate);
					
					var url="images/teamLogo/"+data.team.logo;
					
					
					$("#dimage").attr("src",${createLink(uri: '/')}+"images/teamLogo/"+data.team.logo);
					}
				});
		});
		<%-- End cancel1 --%>
		<%--Remove project from team --%>
		var projectId = null;
		$('a[id*="dl-project-"]').bind("click",function(){
			$("#delete-project-modal").modal('show');	
			projectId = $(this).attr("id").split("-")[2];
			teamId = $(this).attr("id").split("-")[3];
		});

		$('#btnDeleteProject').on('click',function(){
			var okButton = $(this);
			okButton.button('hide');
			
			$.ajax({
				url: '${g.createLink(controller: 'team', action: 'removeProjectById')}',
				dataType: 'json',
				data: {
					teamId: teamId,
					projectId: projectId
				},
				success: function(data){
					if(data.project){
						okButton.button('reset')
						$("#delete-project-modal").modal('hide');
						$("#project-"+ projectId).fadeOut();
					}
					
				}
				
			});		
		});
		<%-- End remove project--%>

		<%-- Change position of a member in a team --%>
		$('select[name="position"]').on('change', function(){
			var teamId = $('#teamId').val();
			var memberId = $(this).attr('class');
			var position = $(this).val();
			$(this).after('<span class="processing"></span>');
			$.ajax({
				url: '${g.createLink(controller: 'team', action: 'changePosition')}',
				dataType: 'json',
				cache: false,
				data: {
					teamId: teamId,
					memberId: memberId,
					position: position
				},
				success: function(data){
					if (data.result === 'success'){
						setTimeout(function(){$('.processing').remove();},500);
					}
				}
			});
		});

		$('.member-avatar').hover(function() {
		  //  $(this).find('img').fadeTo(500, 0.5);
		    $(this).append($('#removeMemberTemplate').html());
		    var context = $(this);
		    $.proxy(
		    $('.btnRemoveMember').on('click', function(e){
			    e.preventDefault();
				if (confirm("Are you sure?")){
					context.append('<span class="processing"></span>');
					var teamId = $('#teamId').val();
					var memberId = context.attr('data-id');
					$.ajax({
						url: '${g.createLink(controller: 'team', action: 'removeMemberFromTeam')}',
						dataType: 'json',
						cache: false,
						data: {
							teamId: teamId,
							memberId: memberId
						},
						success: function(data){
							if (data.result === 'success'){
								setTimeout(function(){context.closest('.member-profile').remove();},500);
							}
						}
					});
				}
			}),this);
		}, function() {
		//    $(this).find('img').fadeTo(500, 1);
		    $(this).find($('.removeMember')).remove();
		});
	</script>
		